<template>
  <div class="login_select">
    <img class="logo" src="../images/logo.png" alt />
    <div class="main">
      <button class="login" @click="login()">手机号登录</button>
      <button class="register" @click="register()">注册</button>
    </div>
    <div class="other">
      <div class="top">
        <i></i>
        其他登录方式
        <i></i>
      </div>
      <ul>
        <li>
          <router-link :to="{name:'LoginMail'}">
            <div class="img">
              <img src="../images/e40.png" alt />
            </div>
            <p>网易邮箱</p>
          </router-link>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {};
  },
  methods: {
    login() {
      this.$router.push({ name: "LoginConfirm" });
    },
    register() {
      this.$router.push({ name: "Register" });
    }
  }
};
</script>
<style lang="scss" scoped>
.login_select {
  background: url(../images/e00.jpg) no-repeat;
  background-size: 100% 100%;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  .logo {
    width: 1.5rem;
    padding-top: 2rem;
    padding-bottom: 1.5rem;
    margin: auto;
  }
  .main {
    flex: 1;
    button {
      display: block;
      padding: 0;
      margin: 0;
      background-color: transparent;
      font-size: 0.4rem;
      color: rgba(237, 73, 62, 1);
      border: 0.02rem solid rgba(237, 73, 62, 1);
      border-radius: 1rem;
      width: 5.5rem;
      height: 0.8rem;
      margin: auto;
      margin-bottom: 0.3rem;
    }
  }
  .other {
    .top {
      color: #999;
      i {
        display: inline-block;
        width: 2rem;
        height: 0.01rem;
        background-color: #ccc;
        vertical-align: middle;
      }
    }
    ul {
      overflow: hidden;
      display: flex;
      justify-content: space-between;
      padding: 0.2rem 0.6rem 0.2rem 0.6rem;
      li {
        .img {
          box-sizing: border-box;
          border: 0.01rem solid #ccc;
          border-radius: 50%;
          width: 0.9rem;
          margin: auto;
          padding: 0.1rem;
        }
        p {
          font-size: 0.24rem;
          line-height: 0.5rem;
          color: #999;
        }
      }
    }
  }
}
</style>